<template>
  <div>
    <div class="card w-48 border-2 border-primary-200">
      <div class="card-body items-center text-center">
        <h2 class="card-title text-3xl">
          <ruby>喜欢<rt>xǐ huān</rt></ruby>
        </h2>
        <div class="card-actions justify-end">
          <button class="btn btn-accent">
            <SpeakerWaveIcon class="w-5" />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { SpeakerWaveIcon } from "@heroicons/vue/24/outline";
</script>

<style scoped></style>
